<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .completed {
            color: red;
            text-decoration: line-through;
        }
    </style>
</head>

<body>
    <input type="text">
    <button class="add">add</button>
    <ul class="todo"></ul>
    <div class="btnContainer"></div>

    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.3/jquery.js"></script>
    <script>

        let data = {
            list: [
                { text: "HTML", completed: false },
                { text: "CSS", completed: true },
                { text: "JS", completed: true },
                { text: "JAVA", completed: false },
            ],
            status: "未完成"
        }

        //----初始渲染函数
        //渲染li的节点
        //渲染下面的按钮
        function render() {
            $('.todo').html('');
            //根据status的状态值，筛选出数据，渲染li
            filterList(data.status).forEach(item => {
                $('<li>')
                    .html(item.text)
                    .addClass(item.completed ? 'completed' : '')
                    .appendTo($('.todo'))
                    //给每个li绑定点击事件，切换状态
                    .on('click', function () {
                        item.completed = !item.completed;
                        //数据变了，需要重新渲染
                        render()
                    })

            });
            //渲染下面切换显示内容的按钮
            filterBtn()

        }

        render()

        //筛选函数
        function filterList(status) {
            switch (status) {
                case '全部':
                    return data.list;
                    break;
                case '已完成':
                    return data.list.filter((item) => item.completed === true)
                    break;
                case '未完成':
                    return data.list.filter((item) => item.completed === false)
                    break;
            }

        }

        function filterBtn() {
            $('.btnContainer').empty();
            //根据状态值渲染不同的标签
            ['全部', '已完成', '未完成'].forEach((item) => {
                if (item == data.status) {
                    $('<span>')
                        .html(item)
                        .appendTo($('.btnContainer'))
                } else {
                    $('<a>')
                        .html(item)
                        .appendTo($('.btnContainer'))
                        .attr('href', '#')
                        .on('click', function (e) {
                            e.preventDefault();
                            data.status = item;
                            render()

                        })
                }

            })

        }

        //添加按钮事件
        $('.add').on('click', function () {
            let text = $('input').val();
            if (text == '' || text == null) {
                return
            } else {
                data.list.push({
                    text,
                    completed: false
                })
                render()
            }
            $('input').val('')
        })

    </script>

</body>

</html>